<template>
    <div class="main-layout">
        <main>
            <!-- 内容插槽，因为没有其它的插槽，所以是一个默认插槽 -->
            <slot/>
        </main>
        <footer>
            <!-- 因为图片和文字都要变化，所以应该在这个选项上添加一个样式 -->
            <div @click="toPage(it)"
                :class="['item', it.active ? 'active' : '']"
                v-for="it in footerList"
                :key="it.text">
                <i :class="[it.icon]"></i>
                <span>{{it.text}}</span>
            </div>
        </footer>
    </div>
</template>

<script>
export default {
  data () {
    return {
      footerList: [
        { icon: 'home', text: '首页', active: false, path: '/home' },
        { icon: 'types', text: '分类', active: false, path: '/types' },
        { icon: 'news', text: '消息', active: false, path: '/news' },
        { icon: 'cart', text: '购物车', active: false, path: '/cart' },
        { icon: 'me', text: '我的', active: false, path: '/me' }
      ]
    }
  },
  watch: {
    '$route.path': {
      // 设置立即监听
      immediate: true,
      // 处理业务
      handler (_path) {
        console.log('------------- 当前的路由', _path)
        this.footerList = this.footerList.map(it => {
          it.active = it.path === _path
          return it
        })
      }
    }
  },
  methods: {
    toPage (it) {
      // 点击对应的按钮,切换到对应的界面
      this.$router.push(it.path)
    }
  }
}
</script>

<style lang="less" scoped>
    @import "../style/common.less";

    // 定义一个名字数组
    @icons: home types news cart me;
    // length(@icons) 获取数组的长度
    .loop(@index: 1) when (@index <= length(@icons)) {

        // 获取数组的值，需要调用一个extract方法
        @icon: extract(@icons, @index);

        > i {
            // 使用变量的时候，如果是一个字符串，必须使用@{}
            &.@{icon} {
                background-image: url("../images/tabs/@{icon}.png");
            }
        }
        &.active {
            > i {
                &.@{icon} {
                    background-image: url("../images/tabs/@{icon}-act.png");
                }
            }
        }

        .loop(@index + 1);
    }

    .main-layout {
        display: block;
        height: 100%;
        > main {
            height: calc(100% - 49px);
            // 当设置横向滚动为关闭的时候，不设置纵向，那么纵向就是自动滚动的
            overflow-x: hidden;
        }
        > footer {
            display: block;
            height: 49px;
            border-top: solid 1px #eeeeee;
            background: #fff;
            > .item {
                float: left;
                width: 20%;
                > i {
                    display: block;
                    height: 32px;
                    background-position: center bottom;
                    background-size: 22px;
                    background-repeat: no-repeat;
                }
                > span {
                    display: block;
                    height: 16px;
                    text-align: center;
                    font-size: .6rem;
                    color: #545456;
                }
                .loop();
                &.active {
                    > span {
                        color: #b42239;
                    }
                }
            }
            .clear();
        }
    }
</style>
